<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-04-22 15:33:57
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="850px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '80px'"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.buildingUnit')" prop="buildingName">
            <TextInput
              v-model="formData.buildingName"
              :label="$t('hotel.buildingUnit')"
              :disabled="type === 'edit'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.roomNumber')" prop="no">
            <TextInput
              v-model="formData.no"
              :label="$t('hotel.roomNumber')"
              :disabled="type === 'edit'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.roomStatus')" prop="status">
            <el-select
              v-model="formData.status"
              :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('hotel.roomStatus')
                )
              "
            >
              <el-option
                v-for="item in g_options.roomStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.roomCategory')" prop="type">
            <TextInput
              v-model="formData.type"
              :label="$t('hotel.roomCategory')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.roomFloor')" prop="floor">
            <TextInput
              v-model="formData.floor"
              :label="$t('hotel.roomFloor')"
              :maxlength="4"
              :disabled="type === 'edit'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.roomArea')" prop="area">
            <TextInput
              v-model="formData.area"
              :label="$t('hotel.roomArea')"
              verify-type="float"
              :maxlength="4"
              @blur="handleInputBlur('area')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('hotel.windowDirection')"
            prop="windowDirect"
          >
            <TextInput
              v-model="formData.windowDirect"
              :label="$t('hotel.windowDirection')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.maxOccupancy')" prop="peopleCount">
            <TextInput
              v-model="formData.peopleCount"
              :label="$t('hotel.maxOccupancy')"
              :maxlength="4"
              verify-type="nzint"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.unitPrice')" prop="price">
            <TextInput
              v-model="formData.price"
              :label="$t('hotel.unitPrice')"
              verify-type="float"
              @blur="handleInputBlur('unitPrice')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('public.remark')" prop="note">
            <TextInput
              v-model="formData.note"
              type="textarea"
              :rows="2"
              :label="$t('public.remark')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() =>
  props.type === 'add' ? g_t('public.create') : g_t('public.edit')
)

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  buildingName: '',
  no: '',
  status: '',
  type: '',
  floor: '',
  area: '',
  windowDirect: '',
  peopleCount: '',
  price: '',
  note: ''
})
const rules = {
  buildingName: g_rules.commonInputText(g_t('hotel.buildingUnit')),
  no: g_rules.commonInputText(g_t('hotel.roomNumber')),
  status: g_rules.selectRule(g_t('hotel.roomStatus')),
  type: g_rules.commonInputText(g_t('hotel.roomCategory')),
  floor: g_rules.commonInputText(g_t('hotel.roomFloor')),
  area: g_rules.roomArea,
  windowDirect: g_rules.commonInputText(g_t('hotel.windowDirection')),
  peopleCount: g_rules.maxOccupancy,
  price: g_rules.unitPrice
}

onMounted(() => {
  props.type === 'edit' && getFormData()
})

const getFormData = () => {
  g_api.hotel
    .apiHotelRoomDetail({
      hotelRoomId: props.id
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        g_utils.assignFormData(formData.value, data)
        formData.value.id = data.id
        console.log('formData.value', formData.value)
      }
    })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleInputBlur = prop => {
  // 数字化处理
  refDialogForm.value.validateField([prop], vaild => {
    if (vaild && formData.value[prop]) {
      formData.value[prop] = formData.value[prop] * 1
    }
  })
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    console.log('formData.value', formData.value)
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.hotel.apiHotelRoomCreate
        : g_api.hotel.apiHotelRoomUpdate
    urlMethod({
      ...formData.value,
      status: formData.value.status * 1
    })
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
